<template>
	<view class="login">
		<view class="login-title">在线日程登录</view>
		<view class="login-content" v-if="loginType">
			<view class="login-username">
				<uni-icons type="person" size="30" color="#11c53e"></uni-icons>
				<input type="text" placeholder="请输入账号" v-model="userAccount">
			</view>
			<view class="login-password">
				<uni-icons type="locked" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="" id="" placeholder="请输入密码" v-model="userPassword">
			</view>
			<view class="forget-password" v-if="loginType">
				<text @click="toForgetPassword">
					忘记密码
				</text>
			</view>
		</view>
		<view class="login-phone" v-else>
			<view class="login-username">
				<uni-icons type="phone" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="userPhone" placeholder="请输入手机号" v-model="userPhone" />
			</view>
			<view class="login-code">
				<uni-icons type="chat" size="30" color="#11c53e"></uni-icons>
				<input type="text" placeholder="请输入验证码" v-model="userCode" />
				<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
			</view>
		</view>
		<view class="login-type">
			<text @click="loginType = !loginType">切换登录方式</text>
		</view>
		<view class="button"><button @click="onSubmit">登录</button></view>
		<view class="login-botton">
			<view class="login-zhuce" @click="Registration">注册账号</view>
		</view>
	</view>
</template>

<script>
import { getCode } from '../../api/user.js'
export default {
	data() {
		return {
			userPhone: '',
			usedPhone: '',
			userCode: '1234',
			disabled: false,
			codeNum: 10,
			codeMsg: '获取验证码',
			loginType: true,
			code: '1234',
			userAccount: '1158189673',
			userPassword: '1158189673',
			rules: {
				userAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		async sendCode() {
			if (this.userPhone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (this.userPhone != '') {
				let reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.userPhone)) {
					uni.showToast({
						title: '输入有效的手机号',
						icon: 'none'
					});
				} else {
					//禁用按钮
					this.disabled = true;
					//发送请求
					let result = await getCode({ phone: this.userPhone })
					if (result.code === 200) {
						this.code = result.data
						this.usedPhone = this.userPhone
					}
					//倒计时
					let timer = setInterval(() => {
						--this.codeNum;
						this.codeMsg = `重新发送 ${this.codeNum}`;
					}, 1000);
					//判断定时器停止
					setTimeout(() => {
						clearInterval(timer);
						(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);
					}, 10000);
				}
			}
		},
		//登录
		async onSubmit() {
			if (this.loginType) {
				if (this.userAccount == '' || this.userPassword == '') {
					uni.showToast({
						title: "内容不能为空哦！",
						icon: "none"
					})
				} else {
					await this.$store.dispatch("user/login", { userAccount: this.userAccount, userPassword: this.userPassword, userPhone: '' })
					uni.switchTab({
						url: '/pages/event/index'
					});
				}
			} else {
				if (this.userPhone == '' || this.userCode == '') {
					uni.showToast({
						title: "内容不能为空哦！",
						icon: "none"
					})
				} else if (this.userCode != this.code) {
					uni.showToast({
						title: "验证码错误！",
						icon: "none"
					})
				} else if (this.usedPhone != this.userPhone) {
					uni.showToast({
						title: '请使用获取验证码的手机号',
						icon: 'none'
					});
				} else {
					await this.$store.dispatch("user/login", { userPhone: this.userPhone })
					uni.switchTab({
						url: '/pages/event/index'
					});
				}
			}

		},
		toForgetPassword() {
			console.log('忘记密码');
			uni.navigateTo({
				url: '/pages/login/forgetPassword/index'
			})
		},
		Registration() {
			console.log('注册');
			uni.navigateTo({
				url: '/pages/login/register/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	background-color: #fff;
	width: 100%;
	background-position: center;
	background-size: cover;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 1535rpx;
	opacity: 0.8;

	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: flex-start;
		margin-left: 50rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #11cd6e;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}

	.login-phone {
		height: 360rpx;

		.login-username {
			display: flex;
			align-items: center;
			margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;

			input {
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}

			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}

		.login-code {
			display: flex;
			align-items: center;
			margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;

			button {
				width: 250rpx;
				height: 85rpx;
				font-size: 30rpx;
				line-height: 85rpx;
				background-color: #11c53e;
				color: #fff;
			}
		}
	}

	.login-content {
		height: 360rpx;

		.login-username {
			display: flex;
			align-items: center;
			margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;

			input {
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}

			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}

		.login-password {
			display: flex;
			align-items: center;
			margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;

			input {
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}

			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
	}

	.forget-password {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx 50rpx 80rpx 0;
		color: #11c53e;
	}

	.button {
		margin-top: 20rpx;

		button {
			background-color: #11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}

	.login-type {
		display: flex;
		justify-content: start;
		margin: 20rpx 0 0 50rpx;
		color: #11c53e;
	}

	.login-botton {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;

		.login-password {
			padding: 0 15rpx;
			color: #11c53e;
		}

		.login-zhuce {
			padding: 0 15rpx;
			color: #11c53e;
		}
	}

	.login-other {
		position: absolute;
		bottom: 100rpx;
		left: 37%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.login-top {
			text-align: center;
		}

		.login-icon {
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;

			image {
				width: 80rpx;
			}
		}
	}

}
</style>
